<?php
require_once 'includes/auth.php';
require_once 'includes/config.php';
requireLogin();

$username = $_SESSION['username'];
$devInfo = getDeveloperInfo($username);

if (!$devInfo) {
    header('Location: index.php');
    exit;
}
require_once 'track_online.php';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API文档 - JIIL微聊</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
        }
        
        .docs-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
        }
        
        .docs-header {
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .docs-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .docs-header p {
            font-size: 1.2rem;
            color: #4a5568;
            max-width: 800px;
        }
        
        .docs-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 30px;
        }
        
        .docs-nav {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 25px;
            height: fit-content;
            position: sticky;
            top: 100px;
        }
        
        .nav-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .nav-item {
            display: block;
            padding: 12px 15px;
            margin-bottom: 8px;
            border-radius: 8px;
            color: #4a5568;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .nav-item:hover {
            background: #f1f8fe;
            color: #3498db;
        }
        
        .nav-item.active {
            background: #3498db;
            color: white;
        }
        
        .nav-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .docs-content {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 40px;
            color: #2c3e50;
        }
        
        .api-section {
            margin-bottom: 50px;
        }
        
        .api-header {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .api-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .api-description {
            font-size: 1.1rem;
            color: #4a5568;
            line-height: 1.7;
        }
        
        .api-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 40px 0;
        }
        
        .detail-card {
            background: #f8fafc;
            border-radius: 10px;
            padding: 25px;
        }
        
        .detail-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .detail-title::before {
            content: '';
            display: block;
            width: 5px;
            height: 24px;
            background: #3498db;
            border-radius: 3px;
        }
        
        .param-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .param-table th {
            background: #edf2f7;
            text-align: left;
            padding: 12px 15px;
            font-weight: 600;
            color: #2d3748;
        }
        
        .param-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .param-table tr:last-child td {
            border-bottom: none;
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            border-radius: 8px;
            padding: 25px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            font-size: 16px;
            line-height: 1.6;
            margin: 25px 0;
        }
        
        .code-key {
            color: #63b3ed;
        }
        
        .code-string {
            color: #f6e05e;
        }
        
        .code-comment {
            color: #a0aec0;
        }
        
        .requirements {
            margin: 30px 0;
        }
        
        .requirements h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .requirements ul {
            padding-left: 25px;
            margin: 20px 0;
        }
        
        .requirements li {
            margin-bottom: 15px;
            position: relative;
            padding-left: 30px;
            font-size: 1.05rem;
            line-height: 1.6;
        }
        
        .requirements li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #48bb78;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        .example-section {
            background: #f1f8fe;
            border-radius: 10px;
            padding: 30px;
            margin-top: 40px;
        }
        
        .example-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
        }
    </style>
    <script>
        function showApiSection(sectionId) {
            // 隐藏所有API部分
            document.querySelectorAll('.api-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // 显示选中的API部分
            document.getElementById(sectionId).style.display = 'block';
            
            // 更新导航项激活状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
                // 确保不激活disabled项
                if (!item.classList.contains('disabled')) {
                    if (item.dataset.section === sectionId) {
                        item.classList.add('active');
                    }
                }
            });
        }
        
        // 默认显示公共群聊调用
        document.addEventListener('DOMContentLoaded', function() {
            showApiSection('public-api');
        });
    </script>
</head>
<body>
    <header class="top-bar">
        <div class="logo">JIIL微聊开发平台</div>
        <nav class="nav-links">
            <a href="index.php">首页</a>
            <a href="dev_console.php">控制台</a>
            <a href="dev_docs.php" class="active">文档</a>
            <a href="logout.php">退出</a>
        </nav>
    </header>
    
    <main class="docs-container">
        <div class="docs-header">
            <h1>API文档中心</h1>
            <p>所有开发者资源和技术文档，帮助您快速集成和使用API</p>
        </div>
        
        <div class="docs-layout">
            <div class="docs-nav">
                <div class="nav-title">API分类</div>
                <a class="nav-item active" data-section="public-api" onclick="showApiSection('public-api')">
                    发送公共消息
                </a>
                <a class="nav-item" data-section="receive-api" onclick="showApiSection('receive-api')">
                    接收公共消息
                </a>
                <a class="nav-item disabled">
                    私聊调用 (即将推出)
                </a>
                <a class="nav-item disabled">
                    群聊调用 (即将推出)
                </a>
            </div>
            
            <div class="docs-content">
                <!-- 发送公共消息 -->
                <div id="public-api" class="api-section">
                    <div class="api-header">
                        <h2 class="api-title">发送公共消息接口</h2>
                        <p class="api-description">
                            通过此API接口，您可以向公共聊天室发送自动化消息。所有消息将带有"[机器人]"前缀标识，
                            并遵循平台的频率限制规则。
                        </p>
                    </div>
                    
                    <div class="api-details">
                        <div class="detail-card">
                            <h3 class="detail-title">请求信息</h3>
                            <table class="param-table">
                                <tr>
                                    <th>属性</th>
                                    <th>值</th>
                                </tr>
                                <tr>
                                    <td>请求方式</td>
                                    <td><strong>POST</strong></td>
                                </tr>
                                <tr>
                                    <td>API接口</td>
                                    <td><code>/send_public</code></td>
                                </tr>
                                <tr>
                                    <td>API地址</td>
                                    <td><code>http://nodejs1.jiil.top</code></td>
                                </tr>
                                <tr>
                                    <td>内容类型</td>
                                    <td><code>application/json</code></td>
                                </tr>
                                <tr>
                                    <td>响应格式</td>
                                    <td>JSON</td>
                                </tr>
                                <tr>
                                    <td>频率限制</td>
                                    <td>1次/秒，10次/分</td>
                                </tr>
                            </table>
                        </div>
                        
                        <div class="detail-card">
                            <h3 class="detail-title">响应信息</h3>
                            <table class="param-table">
                                <tr>
                                    <th>状态</th>
                                    <th>描述</th>
                                </tr>
                                <tr>
                                    <td>200</td>
                                    <td>请求成功</td>
                                </tr>
                                <tr>
                                    <td>400</td>
                                    <td>参数错误</td>
                                </tr>
                                <tr>
                                    <td>401</td>
                                    <td>鉴权失败</td>
                                </tr>
                                <tr>
                                    <td>429</td>
                                    <td>请求过于频繁</td>
                                </tr>
                                <tr>
                                    <td>500</td>
                                    <td>服务器错误</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <div class="requirements">
                        <h3>请求参数</h3>
                        <p>所有请求必须是JSON格式，包含以下字段：</p>
                        
                        <div class="code-block">
                            {<br>
                            &nbsp;&nbsp;<span class="code-key">"auth_id"</span>: <span class="code-string">"鉴权ID"</span>,<br>
                            &nbsp;&nbsp;<span class="code-key">"message_type"</span>: <span class="code-string">"public"</span>,<br>
                            &nbsp;&nbsp;<span class="code-key">"content"</span>: <span class="code-string">"消息内容"</span><br>
                            }
                        </div>
                        
                        <h3>字段要求</h3>
                        <ul>
                            <li><code>auth_id</code> - 您的专属鉴权ID（控制台中查看）</li>
                            <li><code>message_type</code> - 固定值为 "public"</li>
                            <li><code>content</code> - 1-1000个字符的有效内容</li>
                        </ul>
                    </div>
                    
                    <div class="requirements">
                        <h3>响应示例</h3>
                        
                        <p>成功响应：</p>
                        <div class="code-block">
                            {<br>
                            &nbsp;&nbsp;<span class="code-key">"status"</span>: <span class="code-string">"success"</span>,<br>
                            &nbsp;&nbsp;<span class="code-key">"message"</span>: <span class="code-string">"消息发送成功"</span>,<br>
                            &nbsp;&nbsp;<span class="code-key">"timestamp"</span>: <span class="code-string">"2023-09-15T14:30:22Z"</span><br>
                            }
                        </div>
                        
                        <p>错误响应：</p>
                        <div class="code-block">
                            {<br>
                            &nbsp;&nbsp;<span class="code-key">"status"</span>: <span class="code-string">"error"</span>,<br>
                            &nbsp;&nbsp;<span class="code-key">"error_code"</span>: <span class="code-string">"INVALID_AUTH"</span>,<br>
                            &nbsp;&nbsp;<span class="code-key">"message"</span>: <span class="code-string">"鉴权信息无效或过期"</span><br>
                            }
                        </div>
                    </div>
                    
                    <div class="example-section">
                        <h3 class="example-title">使用示例</h3>
                        
                        <p>使用cURL发送请求：</p>
                        <div class="code-block">
                            curl -X POST "http://nodejs1.jiil.top/send_public" \<br>
                            &nbsp;&nbsp;-H "Content-Type: application/json" \<br>
                            &nbsp;&nbsp;-d '{<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;"auth_id": "<?= $devInfo['auth_id'] ?>",<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;"message_type": "public",<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;"content": "测试来自API的消息"<br>
                            &nbsp;&nbsp;}'
                        </div>
                        
                        <p>使用JavaScript发送请求：</p>
                        <div class="code-block">
                            fetch('http://nodejs1.jiil.top/send_public', {<br>
                            &nbsp;&nbsp;method: 'POST',<br>
                            &nbsp;&nbsp;headers: {<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;'Content-Type': 'application/json'<br>
                            &nbsp;&nbsp;},<br>
                            &nbsp;&nbsp;body: JSON.stringify({<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;auth_id: '<?= $devInfo['auth_id'] ?>',<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;message_type: 'public',<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;content: '测试来自API的消息'<br>
                            &nbsp;&nbsp;})<br>
                            })<br>
                            .then(response => response.json())<br>
                            .then(data => console.log(data));
                        </div>
                    </div>
                </div>
                
                <!-- 接收公共消息 -->
               <div id="receive-api" class="api-section" style="display:none;">
    <div class="api-header">
        <h2 class="api-title">接收公共消息接口</h2>
        <p class="api-description">
            通过此API接口，您可以实时接收公共聊天室的消息更新。采用长轮询机制，当有新消息时会立即返回数据。
            <strong>注意：每个IP地址每分钟最多允许10次连接请求</strong>。
        </p>
    </div>
    
    <div class="api-details">
        <div class="detail-card">
            <h3 class="detail-title">请求信息</h3>
            <table class="param-table">
                <tr>
                    <th>属性</th>
                    <th>值</th>
                </tr>
                <tr>
                    <td>请求方式</td>
                    <td><strong>GET</strong></td>
                </tr>
                <tr>
                    <td>API接口</td>
                    <td><code>/poll</code></td>
                </tr>
                <tr>
                    <td>API地址</td>
                    <td><code>http://nodejs.jiil.top:</code></td>
                </tr>
                <tr>
                    <td>响应格式</td>
                    <td>JSON</td>
                </tr>
                <tr>
                    <td>超时时间</td>
                    <td>30秒</td>
                </tr>
                <!-- 添加频率限制行 -->
                <tr>
                    <td>频率限制</td>
                    <td>10次/分钟（按IP地址）</td>
                </tr>
            </table>
        </div>
        
        <div class="detail-card">
            <h3 class="detail-title">响应信息</h3>
            <table class="param-table">
                <tr>
                    <th>状态</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>200</td>
                    <td>成功返回新消息</td>
                </tr>
                <tr>
                    <td>204</td>
                    <td>无新消息（超时）</td>
                </tr>
                <!-- 添加频率限制错误 -->
                <tr>
                    <td>429</td>
                    <td>请求过于频繁</td>
                </tr>
            </table>
        </div>
    </div>
    
    <!-- 其他部分保持不变 -->
    
    <div class="requirements">
        <h3>频率限制响应示例</h3>
        <p>当请求过于频繁时，返回的JSON错误响应：</p>
        
        <div class="code-block">
            {<br>
            &nbsp;&nbsp;<span class="code-key">"status"</span>: <span class="code-string">"error"</span>,<br>
            &nbsp;&nbsp;<span class="code-key">"error_code"</span>: <span class="code-string">"RATE_LIMIT_EXCEEDED"</span>,<br>
            &nbsp;&nbsp;<span class="code-key">"message"</span>: <span class="code-string">"请求过于频繁，每分钟最多允许10次请求"</span><br>
            }
        </div>
    </div>
    
    <!-- 其他部分保持不变 -->

                    
                    <div class="requirements">
                        <h3>响应数据结构</h3>
                        <p>成功响应返回消息数组，每个消息包含以下字段：</p>
                        
                        <div class="code-block">
                            [<br>
                            &nbsp;&nbsp;{<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">"user"</span>: <span class="code-string">"用户名"</span>,<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">"content"</span>: <span class="code-string">"消息内容"</span>,<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">"timestamp"</span>: <span class="code-string">"时间戳"</span><br>
                            &nbsp;&nbsp;},<br>
                            &nbsp;&nbsp;<span class="code-comment">// 更多消息...</span><br>
                            ]
                        </div>
                    </div>
                    
                    <div class="example-section">
                        <h3 class="example-title">使用示例</h3>
                        
                        <p>使用cURL接收消息：</p>
                        <div class="code-block">
                            curl "http://nodejs.jiil.top/poll"
                        </div>
                        
                        <p>使用JavaScript接收消息：</p>
                        <div class="code-block">
                            async function pollMessages() {<br>
                            &nbsp;&nbsp;try {<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;const response = await fetch('http://nodejs.jiil.top/poll');<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;if (response.status === 200) {<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const messages = await response.json();<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('新消息:', messages);<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;}<br>
                            &nbsp;&nbsp;} catch (error) {<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;console.error('请求失败:', error);<br>
                            &nbsp;&nbsp;}<br>
                            &nbsp;&nbsp;// 递归调用以持续监听<br>
                            &nbsp;&nbsp;pollMessages();<br>
                            }<br>
                            <br>
                            // 开始监听消息<br>
                            pollMessages();
                        </div>
                        
                        <p>实时监听消息示例：</p>
                        <div class="code-block">
                            // 使用EventSource接收实时消息<br>
                            const eventSource = new EventSource('http://nodejs.jiil.top/poll');<br>
                            <br>
                            eventSource.onmessage = (event) => {<br>
                            &nbsp;&nbsp;const messages = JSON.parse(event.data);<br>
                            &nbsp;&nbsp;console.log('收到新消息:', messages);<br>
                            };<br>
                            <br>
                            eventSource.onerror = (error) => {<br>
                            &nbsp;&nbsp;console.error('连接错误:', error);<br>
                            };
                        </div>
                    </div>
                </div>
                
                <!-- 其他API部分 -->
                <div id="private-api" class="api-section" style="display:none;">
                    <!-- 私聊调用内容 -->
                </div>
                
                <div id="group-api" class="api-section" style="display:none;">
                    <!-- 群聊调用内容 -->
                </div>
            </div>
        </div>
    </main>
    
    <footer class="footer">
        <p>© <?= date('Y') ?> JIIL微聊开发者平台 版权所有</p>
    </footer>
</body>
</html>